<template>
	<view class="search-modal" v-if="visible" @tap="close">
		<view class="search-content" @tap.stop>
			<view class="search-header">
				<view class="search-input-wrapper">
					<image src="/static/svg/search.svg" class="search-icon" />
					<input 
						class="search-input" 
						placeholder="搜索消息内容、发送人..."
						v-model="searchKeyword"
						@input="handleSearch"
						@confirm="handleSearch"
						:auto-focus="true"
					/>
					<view v-if="searchKeyword" class="clear-btn" @tap="clearSearch">
						<text class="clear-text">✕</text>
					</view>
				</view>
				<view class="cancel-btn" @tap="close">
					<text class="cancel-text">取消</text>
				</view>
			</view>

			<view class="search-body">
				<!-- 搜索建议 -->
				<view v-if="!searchKeyword" class="search-suggestions">
					<view class="suggestion-title">热门搜索</view>
					<view class="suggestion-tags">
						<view 
							v-for="tag in hotTags" 
							:key="tag"
							class="suggestion-tag"
							@tap="searchWithTag(tag)"
						>
							{{ tag }}
						</view>
					</view>
				</view>

				<!-- 搜索结果 -->
				<view v-else class="search-results">
					<view v-if="searchResults.length > 0" class="results-header">
						<text class="results-count">找到 {{ searchResults.length }} 条相关消息</text>
					</view>
					
					<view class="results-list">
						<message-item
							v-for="message in searchResults" 
							:key="message.id"
							:message="message"
							@tap="selectMessage"
						/>
					</view>

					<view v-if="searchResults.length === 0" class="no-results">
						<image src="/static/svg/search.svg" class="no-results-icon" />
						<text class="no-results-text">未找到相关消息</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import MessageItem from './MessageItem.vue'

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	messages: {
		type: Array,
		default: () => []
	}
})

const emits = defineEmits(['close', 'select'])

const searchKeyword = ref('')
const searchResults = ref([])

// 热门搜索标签
const hotTags = ref([
	'系统消息',
	'活动通知',
	'签到',
	'点赞',
	'评论',
	'关注'
])

// 搜索处理
const handleSearch = () => {
	if (!searchKeyword.value.trim()) {
		searchResults.value = []
		return
	}

	const keyword = searchKeyword.value.toLowerCase()
	searchResults.value = props.messages.filter(message => {
		return message.sender.toLowerCase().includes(keyword) ||
			   message.preview.toLowerCase().includes(keyword)
	})
}

// 使用标签搜索
const searchWithTag = (tag) => {
	searchKeyword.value = tag
	handleSearch()
}

// 清除搜索
const clearSearch = () => {
	searchKeyword.value = ''
	searchResults.value = []
}

// 选择消息
const selectMessage = (message) => {
	emits('select', message)
	close()
}

// 关闭搜索
const close = () => {
	clearSearch()
	emits('close')
}

// 监听搜索关键词变化
watch(searchKeyword, (newVal) => {
	if (!newVal.trim()) {
		searchResults.value = []
	}
})
</script>

<style scoped>
.search-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 2000;
}

.search-content {
	width: 100%;
	height: 100%;
	background: white;
	display: flex;
	flex-direction: column;
}

.search-header {
	display: flex;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #eee;
	gap: 15px;
}

.search-input-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 25px;
	padding: 0 15px;
	height: 40px;
}

.search-icon {
	width: 18px;
	height: 18px;
	opacity: 0.6;
	margin-right: 10px;
}

.search-input {
	flex: 1;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;
	font-size: 16px;
	color: #333;
}

.clear-btn {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ccc;
	margin-left: 10px;
}

.clear-text {
	font-size: 12px;
	color: white;
}

.cancel-btn {
	padding: 8px 0;
}

.cancel-text {
	font-size: 16px;
	color: #1890ff;
}

.search-body {
	flex: 1;
	overflow-y: auto;
}

/* 搜索建议 */
.search-suggestions {
	padding: 20px;
}

.suggestion-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	margin-bottom: 15px;
}

.suggestion-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.suggestion-tag {
	background: #f0f0f0;
	color: #666;
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 14px;
	transition: all 0.2s ease;
}

.suggestion-tag:active {
	background: #e0e0e0;
}

/* 搜索结果 */
.search-results {
	flex: 1;
}

.results-header {
	padding: 15px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #eee;
}

.results-count {
	font-size: 14px;
	color: #666;
}

.results-list {
	background: white;
}

.no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
}

.no-results-icon {
	width: 60px;
	height: 60px;
	opacity: 0.3;
	margin-bottom: 15px;
}

.no-results-text {
	font-size: 16px;
	color: #999;
}
</style> 